<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
body{
	background-image: url("01.jpg");
/*	width: 100%;
	height: 900px;*/
}

.box{
	width: 500px;
	height: 350px;
	background-color:#66CDAA;
	/*padding-top: 20px;*/
	text-align: center;
	border-radius: 20px;
	opacity: 0.5;
	/*margin: auto;*/
	position: absolute;
	top: 120px;
	left: 800px;
}

.infor{
	width: 500px;
	height: 200px;
    font-size: 24px;
   position: relative;
   right: 200px;
    padding-top: 20px;

}

.pass{
 
  top: 80px;
}

.btn{
	position: absolute;
	top: 250px;
	left: 165px;
}

.infor input{
   width: 250px;
   height: 30px;
}

 .infor span{
 	position: absolute;
    width: 400px;
    height: 25px;
 }
.btn button{
	width: 90px;
	height: 45px;
}
</style>
</head>
<body>
<div class="box" id="box_top">
   <h1> 用户登录</h1>
   <hr>
   <div class="infor">
      <span>账号<input type="text" placeholder="请输入账号" ></span>
      <br>
      <span class="pass">密码<input type="text" placeholder="请输入密码"></span><br>
    </div>
   <div class="btn">
      <button id="mine">确定</button>
      <button id="cancel">取消</button>
   </div>

</div>

<script>
var Cancel=document.getElementById('cancel');
var Box_top=document.getElementById('box_top');
var Mine=document.getElementById('mine');

Cancel.onclick=function(){
    Box_top.style.display='none';
}

Mine.onclick=function(){
    Box_top.style.display='none';
    alert('欢迎登陆！');
}
</script>
</body>
</html>